<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/box3.css">
    <link rel="stylesheet" href="css/cz.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2155698_37sb86wwlh9.css">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body>
<div class="zong" style="background-color: rgb(211,211,211);width: 100%;">   
    <div class="top1 center" style="width: 1200px;margin-left: auto;margin-right: auto;">
        <div class="header-left">                     
            <a>小米网</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a>MIUI</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a>米聊</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a>游戏</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a>多看阅读</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a>云服务</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a>小米网移动版</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a>Select region</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a>米粉节答疑</a>                           
        </div>
        <div class="header-right">                 
            <a>注册</a>&nbsp;&nbsp;|&nbsp;&nbsp;
            <a>登录</a>
        </div>
    </div>
</div>      
<div class="top2-left" style="width: 1200px;margin-left: auto;margin-right: auto;position: relative;margin-top: 8px;margin-bottom: 6px;">
    <img class="logo" src="images/logo.png" alt="" >      
    <div class="clock">
        <img src="images/clock.png" alt="" style="position: absolute;right: 110px;">
        <span style="position: absolute;right: 0;">4月14日开放购买</span>
    </div>
        <input class="input1" type="text" placeholder="搜索你需要的商品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小米手环&nbsp;耳机音响&nbsp;保护壳">             
        <button class="btn1"></button>
        <button class="btn2"><img src="images/shopcar.png">购物车</button>
</div>                     
    <div class="box2 ">
        <div class="nav-left">
            <table>
                <tr class="one">
                    <td class="fenlei one1">全部商品分类</td>
                </tr>
                <tr class="one" >
                    <td class="one1" style="border-top: 0;">
                    <p>购买手机</p><br>
                    <p>小米Note 小米4 红米 红米Note</p>
                    </td>
                </tr>
                <tr class="one">
                    <td class="one1">
                        <p>购买电视与平板</p><br>
                        <p>小米电视 小米盒子 小米平板</p>
                    </td>                                
                </tr>
                <tr class="one">
                    <td class="one1">
                        <p>路由器与智能硬件</p><br>
                        <p>路由器 体重秤 净化器与滤芯</p>
                    </td>
                </tr>
                <tr class="one">
                    <td class="one1">
                        <p>插线板、移动电源与电池</p><br>
                        <p>小米移动电源 电池 充电器</p>
                    </td>                
                </tr>
                <tr class="one">
                    <td class="one1">
                        <p>耳机音箱与存储卡</p><br>
                        <p>小米头戴式耳机 小米活塞耳机</p>
                    </td>                                
                </tr>
                <tr class="one">
                    <td class="one1">
                        <p>保护套与贴膜</p><br>
                        <p>保护套/保护壳 贴膜 防尘塞</p>
                    </td>                               
                </tr>
                <tr class="one">
                    <td class="one1">
                        <p>音量与个性化配件</p><br>
                        <p>米键 后盖 贴纸 手机支架</p>
                    </td>               
                </tr>
                <tr class="one">
                    <td class="one1">
                        <p>小米生活方式</p><br>
                        <p>服装 米兔 背包 生活周边</p>
                    </td>               
                </tr>
            </table>
        </div>
        <div class="nav-right">
            <div class="container">
                <ul class="across">
                    <li>首页</li>
                    <li>小米手机</li>
                    <li>红米</li>
                    <li>小米平板</li>
                    <li>小米电视</li>
                    <li>盒子</li>
                    <li>路由器</li>
                    <li>合约机</li>
                    <li>服务</li>
                    <li>社区</li>
                </ul>
            </div>
            <div class="content">
                <div id="list">
                    <img src="images/banner5.png" alt="">
                    <img src="images/banner4.png" alt="">
                    <img src="images/banner3.png" alt="">
                    <img src="images/banner2.png" alt="">
                    <img src="images/banner1.png" alt="">
                </div>
                <button id="prev"></button>
                <button id="next"></button>
                <div id="btns">
                    <span class="current">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
            </div>
            <div class="sanzhang">
                <img src="images/01.png" alt="">
                <img src="images/02.png" alt="">
                <img src="images/03.png" alt="">
            </div>
        </div>
    </div>


        <div class="box3">
            <div class="box3-text">
                <span class="mxdp">小米明星单品</span>
                <span class="gjjx">根据机型选配件</span>
                
                <div class="btnleft"></div>
                <div class="btnright"></div>
            </div>
            <table class="xiao">
                <tr>
                    <td>
                        <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt=""><br>
                        <p style="color: #333;">小米智能插座</p>
                        <p>让普通家电变得智能</p>
                    </td>
                    <td>
                        <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt=""><br>
                        <p>小米空气净化器</p>
                        <p>高性能智能空气净化器立即预约</p>
                    </td>
                    <td>
                        <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt=""><br>
                        <p>小米活塞耳机简装版</p>
                        <p>好声音源自活塞式音腔，延续经典设计</p>
                    </td>
                    <td>
                        <img src="images/aa.jpg" alt=""><br>
                        <p>小米路由器</p>
                        <p>顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
                    </td>
                </tr>
            </table>
        </div>    
        
        <div class="box4-text">
            <span class="text-left">新品上架</span>
            <span class="text-right">更多&gt;</span>
        </div>
        <div class="box4">          
            <table class="box-left">
                <tr>
                    <td class="two" colspan="2">
                        <img style="width: 535px;" src="images/fanghezi0407xiao.jpg" alt="">
                    </td>
                    <td class="two">                        
                        <div class="two2">
                            <p class="ysk">小米手环</p>
                            <p>79元</p>
                        </div>
                        <img style="width: 311px;" src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt="">
                    </td>
                </tr>
                <tr>
                    <td class="two">                       
                        <div class="two2 ysk">
                            <p>5周年米兔钥匙扣</p>
                            <p>9.9元</p>
                        </div>
                        <img class="ys" src="images/yaoshi1.jpg" alt="">
                    </td>
                    <td class="two" rowspan="2">                       
                        <div class="two2">
                            <p>小米T恤路标MILOGO</p>
                            <p>39元</p>
                        </div>
                        <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt="">
                    </td>
                    <td class="two" rowspan="2">                       
                        <div class="two2">
                            <P>小米4实木后盖</P>
                            <P>69元</P>
                        </div>
                        <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt="">
                    </td>
                </tr>
                <tr>
                    <td class="two">                        
                        <div class="ysk" class="two2">
                            <p>QCY派Q8蓝牙耳机</p>
                            <p>59.9元</p>
                        </div>
                        <img class="ys" src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" alt="">
                    </td>
                </tr>
                <tr>
                    <td class="two">                       
                        <div style="padding-top:0;" class="two2">
                            <p class="ysk">小米Note超薄保护壳</p>
                            <p>49元</p>
                        </div>
                        <img style="width: 120px;" src="images/baohuke.png" alt="">
                    </td>
                    <td class="two">                       
                        <div style="padding-top:0;" class="two2">
                            <p class="ysk">小米自拍杆</p>
                            <p>49元</p>
                        </div>
                        <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt="">
                    </td>
                    <td class="two">                       
                        <div style="padding-top:0;" class="two2">
                            <p class="ysk">先锋CL31系列耳式耳机</p>
                            <p>99元</p>
                        </div>
                        <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt="">
                    </td>
                </tr>
            </table>
            <table class="three" >
                <tr>
                    <td class="three3">
                        <img class="pic2" src="images/T1ByZTBjJT1RXrhCrK.jpg" alt="">
                        
                            <span class="tj">特价商品</span>
                        <div class="p2">
                            <p>SanDisk32GB存储卡</p>
                            <span class="hs">79元</span><span class="udl">109元</span>
                            <p>还有更多特价商品</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="three3">
                        <img class="pic2" src="images/channel-list-cool.jpg" alt="">
                        <div class="p2">
                            <p>特惠配件套餐</p>
                            <p>手机必备配件组合购买</p>
                            <p>实惠更优惠</p>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="three3">
                        <img class="pic2" src="images/channel-list-new.jpg" alt="">
                        <div class="p2">
                            <p>我爱酷玩</p>
                            <p>邂逅炫酷的电子产品</p>
                            <p>结交趣味相投的朋友</p>
                        </div>
                    </td>
                </tr>
            </table>
            <div class="qiye">
                <div class="tongdao">
                    <div class="line-1">
                        <span class="zw1">企业用户采购通道</span>
                        <span class="jt1" style="float: right;">&gt;</span>
                        <div class="line line1"></div>
               
                        <span class="zw2">小米手机防伪查询</span>
                        <span class="jt2" style="float: right;">&gt;</span>
                        <div class="line line2"></div>
                             
                        <span class="zw3">小米手机官翻版</span>
                        <span class="jt3" style="float: right;">&gt;</span>
                        <div class="line line3"></div>
        
                        <span class="zw4">小米路由器官翻版</span>
                        <span class="jt4" style="float: right;">&gt;</span>
                        <div class="line line4"></div>

                        <span class="zw5">米粉红包</span>
                        <span class="jt5" style="float: right;">&gt;</span>
                        <div class="line line5"></div>
                    </div>

                    <div class="chongzhi">
                        <p style="color: rgb(83, 83, 83);">话费充值</p>
                        <input class="cz" type="text" placeholder="请输入手机号">
                        <input class="cz" style="color: #333;" type="text" placeholder="100元">
                        <p style="color: rgb(150, 150, 150);margin-top: 20px;">实付价格98.4元起</p>
                        <button class="btn3">立即充值</button>
                    </div>
                    <div class="triangle"></div>
                </div>
            </div>
        </div>
        <div class="footer center">
            <div class="foot1">
                <div class="img1">
                    <i class="iconfont icon-xiuli" style="font-size: 36px;"></i>
                    <p>1小时快修服务</p>
                </div>
                <div class="img2">
                    <i class="iconfont icon-tuihuanhuo" style="font-size: 36px;"></i>
                    <p>7天无理由退货</p>
                </div>
                <div class="img3">
                    <i class="iconfont icon-tuihuanhuo1" style="font-size: 36px;font-weight: 100;"></i>
                    <p>15天免费换货</p>
                </div>
                <div class="img4">
                    <i class="iconfont icon-liwu" style="font-size: 36px;"></i>
                    <p>满150元包邮</p>
                </div>
                <div class="img5">
                    <i class="iconfont icon-ditu" style="font-size: 36px;padding-left: 43px;"></i>
                    <p>520余家售后网点</p>
                </div>
            </div>
            <div class="foot2">
                <div class="biao1">
                    <ul class="b11">
                        <li>帮助中心</li>
                        <li>购物指南</li>
                        <li>支付方式</li>
                        <li>配送方式</li>
                    </ul>
                </div>
                <div class="biao2">
                    <ul class="b11">
                        <li>服务支持</li>
                        <li>售后政策</li>
                        <li>自助服务</li>
                        <li>相关下载</li>
                    </ul>
                </div>
                <div class="biao3">
                    <ul class="b11">
                        <li>小米之家</li>
                        <li>小米之家</li>
                        <li>服务网点</li>
                        <li>预约亲临到店服务</li>
                    </ul>
                </div>
                <div class="biao4">
                    <ul class="b11">
                        <li>关于小米</li>
                        <li>了解小米</li>
                        <li>加入小米</li>
                        <li>联系我们</li>
                    </ul>
                </div>
                <div class="biao5">
                    <ul class="b11">
                        <li>关注我们</li>
                        <li>新浪微博</li>
                        <li>小米部落</li>
                        <li>官方微信</li>
                    </ul>
                </div>
                <div class="zi">
                    <p>400-100-5678</p>
                    <p>周一至周日8:00-18:00</p>
                    <p>(仅收市话费)</p>
                    <p>24小时在线客服</p>
                </div>
            </div>
            <div class="foot3">
                <div class="xmqx">
                    <a href="">小米旗下网站:小米网</a> |
                    <a href="">MIUI</a> |
                    <a href="">米聊</a> |
                    <a href="">多看书城</a> |
                    <a href="">小米路由器</a> |
                    <a href="">繁体香港</a> |
                    <a href="">繁体台湾</a> |
                    <a href="">English</a> |
                    <a href="">小米后院</a> |
                    <a href="">小米天猫店</a> |
                    <a href="">小米淘宝直营店</a> |
                    <a href="">小米联盟</a>
                </div>
                <div class="hao">&copy;mi.com京ICP证110507号 京ICP备10046444号 京公网安备1101080212135号 京网文[2014]0059-0009号</div>
                <div class="footerlast">
                <img src="images/16.png" alt="">
                
                <input class="jtzw" type="text" placeholder="简体中文">
            </div>
            <div class="triangle2"></div>
            </div>  
    <script>
        var index = 0;
        $("#next").click(function () {
            index++;
            if (index > 4) {
                index = 0;
            }
            animate(index);
        })
        $("#prev").click(function () {
            index--;
            if (index < 0) {
                index = 4;
            }
            console.log(index)
            animate(index);
        })

        // 4.点击焦点换图
        $('#btns span').click(function () {
            // 重置下标值
            index = $(this).index();
            animate(index)
        })

        function animate(index) {
            $("#list img").eq(index).fadeIn().siblings().fadeOut()
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
        }
    </script>
</body>
</html>